<template>
  <view class="page-content">
    <view>
      <u-tabs-swiper
        active-color="#000000"
        inactive-color="#999999"
        :bar-style="{ background: '#FCD610' }"
        ref="uTabs"
        :list="list"
        :current="current"
        @change="tabsChange"
        :is-scroll="false"
      ></u-tabs-swiper>
    </view>
    <view class="search-box">
      <custom-input
        placeholder="搜索"
        background="#FFFFFF"
        :text="filterParmas.name"
        @handleSearch="handleSearch"
      ></custom-input>
    </view>

    <swiper
      class="swiper-box"
      :current="swiperCurrent"
      @transition="transition"
      @animationfinish="animationfinish"
    >
      <swiper-item class="swiper-item">
        <view class="sort-box">
          <view style="flex: 1">
            <sort-tab
              sortText="离我最近"
              @sortChanged="sortDistanceChanged"
            ></sort-tab>
          </view>
          <view style="flex: 1">
            <sort-tab
              sortText="价格排序"
              @sortChanged="sortPriceChanged"
            ></sort-tab>
          </view>
          <view style="flex: 1">
            <sort-tab
              sortText="1小时内"
              @sortChanged="sortDistanceChanged"
            ></sort-tab>
          </view>
        </view>
        <scroll-view
          scroll-y
          style="flex: 1; overflow-y: auto"
          @scrolltolower="onreachBottom"
          @refresherrefresh="handlerefresh"
          :refresher-triggered="showrefresh"
        >
          <template v-if="dataLists.length === 0 && status == 'nomore'">
            <empty></empty>
          </template>
          <template v-else>
            <view class="cards">
              <bls-card :lists="dataLists" :current="0"></bls-card>
            </view>
            <u-loadmore :status="status" margin-top="20" />
          </template>
        </scroll-view>
      </swiper-item>
      <swiper-item class="swiper-item">
        <view class="sort-box">
          <view style="flex: 1">
            <sort-tab
              sortText="离我最近"
              @sortChanged="sortPriceChanged"
            ></sort-tab>
          </view>
          <view style="flex: 1">
            <sort-tab
              sortText="价格排序"
              @sortChanged="sortDistanceChanged"
            ></sort-tab>
          </view>
          <view style="flex: 1">
            <sort-tab
              sortText="1小时内"
              @sortChanged="sortTimeChanged"
            ></sort-tab>
          </view>
        </view>
        <scroll-view
          scroll-y
          style="flex: 1; overflow-y: auto"
          @scrolltolower="onreachBottom"
        >
          <template v-if="dataLists.length === 0 && status == 'nomore'">
            <empty></empty>
          </template>
          <template v-else>
            <view class="cards">
              <blxq-card :lists="dataLists" :current="1"></blxq-card>
            </view>

            <u-loadmore :status="status" margin-top="20" />
          </template>
        </scroll-view>
      </swiper-item>
    </swiper>
    <view class="add-btn"><add-btn :link="linkto"></add-btn></view>
  </view>
</template>

<script>
import empty from 'components/common/empty/empty.vue'
import utils from '../../../../utils/util.js'
import { querySlipList, queryDemondList } from '@/api/cwbl.js'
import blsCard from 'components/index/cwbl/bls-card.vue'
import blxqCard from 'components/index/cwbl/blxq-card.vue'
import customInput from 'components/common/custom-input.vue'
import sortTab from 'components/index/cmbz/sort-tab.vue'
import addBtn from 'components/index/add-fixed-btn.vue'
export default {
  data() {
    return {
      showrefresh: false,
      dataLists: [],
      filterParmas: {
        searchValue: '',
        nowLat: 0,
        nowLng: 0,
        sortFiled: '',
        sortType: '',
        pageNum: 1,
        pageSize: this.$config.pageSize,
      }, //筛选参数
      list: [
        {
          name: '帮遛师',
        },
        {
          name: '帮遛需求',
        },
      ],
      // 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
      current: 0, // tabs组件的current值，表示当前活动的tab选项
      swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
      status: 'loadmore',
      dataList: [],
    }
  },
  watch: {
    swiperCurrent: function (newvalue, oldvalue) {
      this.status = 'loadmore'
      this.dataLists = []
      this.filterParmas = {
        ...this.filterParmas,
        sortOrder: '',
        sort: '',
        pageNum: 1,
        searchValue: '',
      }
      this.getLists(newvalue)
    },
  },
  computed: {
    linkto() {
      switch (this.current) {
        case 0:
          return '/pages/index/cwbl/addBls/addBls'
        case 1:
          return '/pages/index/cwbl/addBlxq/addBlxq'

        default:
          break
      }
    },
  },
  onShow: function (option) {
    this.status = 'loadmore'
    this.filterParmas.pageNum = 1
    this.dataLists = []
    utils
      .getLocationInfo()
      .then((res) => {
        this.filterParmas.nowLat = res.latitude
        this.filterParmas.nowLng = res.longitude
        this.getLists(this.current)
      })
      .catch((err) => {
        this.getLists(this.current)
      })
  },
  onLoad() {},
  methods: {
    handlerefresh() {
      this.showrefresh = true
      this.filterParmas.pageNum = 1
      this.dataLists = []
      this.getLists(this.current)
    },
    getLists(index) {
      if (index == 1) {
        this.getDemonLists()
      } else {
        this.getSlipLists()
      }
    },
    getSlipLists() {
      querySlipList(this.filterParmas)
        .then((res) => {
          if (this.status == 'loadmore') {
            this.status = 'loadmore'
            this.filterParmas.pageNum++

            this.dataLists.push(...res.rows)
            this.dataLists.forEach((item) => {
              item.distance =
                item.distance != null && item.distance != '--'
                  ? Number(item.distance).toFixed(2)
                  : '--'
            })
            console.log(this.dataLists, 'this.dataLists调试')
            if (this.dataLists.length >= res.total) {
              this.status = 'nomore'
            } else {
              this.status = 'loadmore'
            }
            this.showrefresh = false
          }
        })
        .catch((err) => {
          this.status = 'nomore'
          this.showrefresh = false
        })
    },
    getDemonLists() {
      // this.filterParmas
      console.log(this.filterParmas.pageNum, 'this.filterParmas')
      queryDemondList(this.filterParmas).then((res) => {
        if (this.status == 'loadmore') {
          this.status = 'loadmore'
          this.filterParmas.pageNum++

          this.dataLists.push(...res.rows)
          this.dataLists.forEach((item) => {
            item.distance =
              item.distance != null && item.distance != '--'
                ? Number(item.distance).toFixed(2)
                : '--'
          })
          if (res.rows.length < this.$config.pageSize) {
            this.status = 'nomore'
          } else {
            this.status = 'loadmore'
          }
        }
      })
    },
    handleSearch(val) {
      this.filterParmas.searchValue = val
      this.filterParmas.pageNum = 1
      this.dataLists = []
      this.$forceUpdate()
      this.getLists(this.current)
    },
    // tabs通知swiper切换
    tabsChange(index) {
      this.swiperCurrent = index
      // this.status = 'loadmore'
      // this.filterParmas.pageNum = 1
      // this.dataLists = []
      // this.$forceUpdate()
      // if (index) {
      //   this.getDemonLists()
      // } else {
      //   this.getSlipLists()
      // }
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx
      this.$refs.uTabs.setDx(dx)
    },
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      let current = e.detail.current
      this.$refs.uTabs.setFinishCurrent(current)
      this.swiperCurrent = current
      this.current = current
    },
    // scroll-view到底部加载更多
    onreachBottom() {
      if (this.status === 'loadmore') this.getLists(this.current)
    },
    sortPriceChanged(value) {
      this.filterParmas.pageNum = 1
      this.dataLists = []
      this.status = 'loadmore'
      this.$forceUpdate()
      this.filterParmas.sortType = value
      this.filterParmas.sortFiled = 'price'
      this.getLists(this.current)
    },
    sortDistanceChanged(value) {
      this.filterParmas.pageNum = 1
      this.dataLists = []
      this.status = 'loadmore'
      this.$forceUpdate()
      this.filterParmas.sortType = value
      this.filterParmas.sortFiled = 'distance'
      console.log('排序')
      this.getLists(this.current)
    },
    sortTimeChanged(value) {
      this.filterParmas.pageNum = 1
      this.dataLists = []
      this.status = 'loadmore'
      this.$forceUpdate()
      this.filterParmas.sortType = value
      this.filterParmas.sortFiled = 'createTime'
      console.log('排序')
      this.getLists(this.current)
    },
    driverplandetail() {
      switch (this.current) {
        case 0:
          uni.navigateTo({
            url: '/pages/index/cwbl/blsDetail/blsDetail',
          })
          break
        case 1:
          uni.navigateTo({
            url: '/pages/index/cwbl/blxqDetail/blxqDetail',
          })
          break
        case 2:
          uni.navigateTo({
            url: '/pages/index/cwbasi/driver-plan-detail/driver-plan-detail',
          })
          break
        default:
          break
      }
    },
  },
  components: {
    blsCard,
    blxqCard,
    customInput,
    sortTab,
    addBtn,
    empty,
  },
}
</script>

<style lang="scss" scoped>
.page-content {
  height: 100%;
  background-color: #f6f6f6;

  display: flex;
  flex-direction: column;

  .search-box {
    padding: 16rpx 32rpx 24rpx 32rpx;
  }

  .sort-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24rpx;
  }

  .swiper-box {
    flex: 1;

    .swiper-item {
      box-sizing: border-box !important;
      padding: 0 32rpx;
      display: flex;
      flex-direction: column;

      .cards {
        margin-top: 32rpx;

        &:first-child {
          margin-top: 0;
        }
      }
    }
  }

  .add-btn {
    position: absolute;
    bottom: 218rpx;
    right: 32rpx;
  }
}
</style>